<template>
  <div class="food_msg">
    <el-container>
      <el-header>{{msg.name}}</el-header>
      <el-container>
        <el-aside width="300px">
          <template slot-scope="scope">
            <img :src="msg.pic" alt="">
          </template>
        </el-aside>
        <el-main>
          <el-table :data="msg.process" border style="width: 100%">
            <el-table-column prop="pic" label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.pic" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="pcontent" label="做法"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {
  getAllTypes,
  getFoodsByPage,
  getFoodDetail,
  getFoodByKeyWord
} from "../services/foods";
export default {
  data() {
    return {
      data: "",
      msg: []
    };
  },
  created() {
    this.data = this.$route.query;
    getFoodDetail(this.data).then(res => {
      console.log(res.data.result);
      this.msg = res.data.result;
    });
  }
};
</script>
<style>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}
.el-aside img{
  margin-top: 300px;
}
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>

